<template>
  <div class="response-single-box List">
    <div class="response-single">
      <div class="response-single-title">
        <div class="circle" style="background:transparent;border:none">
          <span class="iconfont icon-duihao"></span>
        </div>
        <p class="sing-title">{{this.response.type}}</p>
        <!-- <p class="sing-money">¥5555</p> -->
      </div>
      <div class="response-single-list ">
        <ul>
          <li>
            <span class="fleft">用户昵称</span>
            <span class="fright">{{this.response.username}}</span>
            <div class="_clear"></div>
          </li>
          <li>
            <span class="fleft">联系电话</span>
            <span class="fright">{{this.response.phone}}</span>
            <div class="_clear"></div>
          </li>
          <li>
            <span class="fleft">问题类型</span>
            <span class="fright">{{this.response.type}}</span>
            <div class="_clear"></div>
          </li>
          <li>
            <span class="fleft">问题描述</span>
            <span class="fright">{{this.response.rmk}}</span>
            <div class="_clear"></div>
          </li>
          <li>
            <span class="fleft">提交时间</span>
            <span class="fright">{{this.response.creattime}}</span>
            <div class="_clear"></div>
          </li>
          <!-- <li>
            <span class="fleft">设备场地</span>
            <span class="fright">{{this.response.creattime}}</span>
            <div class="_clear"></div>
          </li>-->
          <li>
            <span class="fleft">设备名称</span>
            <span class="fright">{{this.response.eqname}}</span>
            <div class="_clear"></div>
          </li>

          <li>
            <span class="fleft">设备编号</span>
            <span class="fright">{{this.response.deviceNo}}</span>
            <div class="_clear"></div>
          </li>
          <li>
            <span class="fleft">端口号</span>
            <span class="fright">{{this.response.devicePort}}</span>
            <div class="_clear"></div>
          </li>
          <block v-if="this.response.state==='处理完成'">
            <li>
              <span class="fleft">批注</span>
              <span class="fright">{{this.response.comment}}</span>
              <div class="_clear"></div>
            </li>
            <li>
              <span class="fleft">处理人</span>
              <span class="fright">{{this.response.handler}}</span>
              <div class="_clear"></div>
            </li>
            <li>
              <span class="fleft">处理时间</span>
              <span class="fright">{{this.response.handleTime}}</span>
              <div class="_clear"></div>
            </li>
          </block>
        </ul>
      </div>
    </div>
    <div class="problem-box">
      <textarea placeholder="填写批注" v-model="data.comment" v-if="this.response.state!='处理完成'"></textarea>
    </div>
    <div v-if="this.response.state!=='处理完成'" class="l-btn-box">
      <mu-button class="btn login-btn" @click="comment" style="width:100%">提交</mu-button>
    </div>
  </div>
</template>

<script>
    import {Toast} from "vant";
    import "vant/lib/toast/style/index";

    export default {
        data() {
            return {
                response: {
                    type: "",
                    username: "",
                    phone: "",
                    rmk: "",
                    creattime: "",
                    eqname: "",
                    deviceNo: '',
                    devicePort: '',
                    state: "",
                    comment: ""
                },
                data: {
                    comment: ""
                }
            };
        },
        mounted() {
            const params = this.$route.params.id; // 取到路由带过来的参数
            this.$api.getFeedBack(this.$route.params.id).then(res => {
                this.response.type = res.data.data.type;
                this.response.username = res.data.data.userName;
                this.response.phone = res.data.data.mobile;
                this.response.rmk = res.data.data.rmk;
                this.response.creattime = res.data.data.createTime;
                this.response.eqname = res.data.data.PKNAME;
                this.response.deviceNo = res.data.data.deviceNo;
                this.response.devicePort = res.data.data.devicePort;
                this.response.state = res.data.data.state;
                this.response.comment = res.data.data.COMMENT;
                this.response.handler = res.data.data.hander;
                this.response.handleTime = res.data.data.handerTime;

                this.data.comment = res.data.data.comment
            });
        },
        methods: {
            comment() {
                if (!this.data.comment) {
                    Toast("请输入批注");
                    return;
                }
                this.$api.doFeedBack(this.$route.params.id, this.data.comment, 1).then(res => {
                    console.log(res)
                    if (res.data.message.code == 0) {
                        Toast("批注成功");
                        this.$router.push("/admin/response");
                    }
                })
            }
        }
    };
</script>

<style>
</style>
